*{
    margin: 0;
    padding: 0;
}

:root {
    --dark-color: #292c35;
}

body{
    font-family: Archivo, system-ui;
    transition: background-color 0.5s;
}

.logo{
    width: 50%;
}

.filter-light{
    width: 50%;
    filter: invert(12%) sepia(9%) saturate(1330%) hue-rotate(187deg) brightness(96%) contrast(85%);
}

.filter-dark {
    filter: invert(100%) sepia(100%) saturate(2%) hue-rotate(138deg) brightness(103%) contrast(101%);
}

header{
    width: 100%;
    text-align: center;
    /* margin: 2em 0; */
}

footer{
    width: 100%;
    text-align: center;
}

.container{
    width: 50%;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap:2em;
    margin-bottom: 5em;
}

.field{
    display: grid;
    grid-gap: 50px;
    grid-template-columns: 20% 80%;
    margin-bottom: 20px;
}

.title {
    font-style: italic;
    font-family: Newsreader, Georgia, Times, Times New Roman, serif;
}

.button{
    text-decoration: none;
    display: inline-block;
    color: white;
    border: 1px white solid;
    padding: 10px 15px;
    margin-bottom: 5px;
    border-radius: 2em;
    background-color: var(--dark-color);
    transition: color 0.3s, background-color 0.3s, border-color 0.5s;
}

.button:hover{
    color: black;
    background-color: white;
    border-color: var(--dark-color);
}

.content{
    text-align: justify;
}

ul {
    list-style-type: none;
}

.link {
    text-decoration: none;
    color: gray;
}

.link:hover {
    color: var(--dark-color);
}

/* Dark Mode */

.body-dark-mode{
    background-color: var(--dark-color);
    color: white;
}

.button-dark-mode{
    background-color: white;
    color: black;
    border-color: var(--dark-color);
}

.button-dark-mode:hover {
    background-color: var(--dark-color);
    border-color: white;
    color: white;
}

/* Color theme button */

.toggle-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.toggle-slot {
    position: relative;
    height: 10em;
    width: 20em;
    border: 5px solid #e4e7ec;
    border-radius: 10em;
    background-color: white;
    transition: background-color 250ms;
}

.toggle-checkbox:checked~.toggle-slot {
    background-color: var(--dark-color);
}

.toggle-button {
    transform: translate(11.75em, 1.75em);
    position: absolute;
    height: 6.5em;
    width: 6.5em;
    border-radius: 50%;
    background-color: white;
    box-shadow: inset 0px 0px 0px 0.75em var(--dark-color);
    transition: background-color 250ms, border-color 250ms, transform 500ms cubic-bezier(.26, 2, .46, .71);
}

.toggle-checkbox:checked~.toggle-slot .toggle-button {
    background-color: var(--dark-color);
    box-shadow: inset 0px 0px 0px 0.75em white;
    transform: translate(1.75em, 1.75em);
}

.sun-icon {
    position: absolute;
    height: 6em;
    width: 6em;
    color: var(--dark-color);
}

.sun-icon-wrapper {
    position: absolute;
    height: 6em;
    width: 6em;
    opacity: 1;
    transform: translate(2em, 2em);
    transform-origin: 50% 50%;
    transition: opacity 150ms, transform 500ms cubic-bezier(.26, 2, .46, .71);
}

.toggle-checkbox:checked~.toggle-slot .sun-icon-wrapper {
    opacity: 0;
    transform: translate(3em, 2em);
}

.moon-icon {
    position: absolute;
    height: 6em;
    width: 6em;
    color: white;
}

.moon-icon-wrapper {
    position: absolute;
    height: 6em;
    width: 6em;
    opacity: 0;
    transform: translate(11em, 2em);
    transform-origin: 50% 50%;
    transition: opacity 150ms, transform 500ms cubic-bezier(.26, 2.5, .46, .71);
}

.toggle-checkbox:checked~.toggle-slot .moon-icon-wrapper {
    opacity: 1;
    transform: translate(12em, 2em);
}

.light-modes{
    font-size: 3px;
    float: right;
}

.light-modes-container{
    width: 100%;
    margin-top: 15px;
    display: block;
}

/* Dark Mode */

.body-dark-mode{
    background-color: var(--dark-color);
    color: white;
}

.button-dark-mode{
    background-color: white;
    color: black;
    border-color: var(--dark-color);
}

.button-dark-mode:hover {
    background-color: var(--dark-color);
    border-color: white;
    color: white;
}

.link-dark-mode:hover{
    color: white;
}

/* Color theme button */

.toggle-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.toggle-slot {
    position: relative;
    height: 10em;
    width: 20em;
    border: 5px solid #e4e7ec;
    border-radius: 10em;
    background-color: white;
    transition: background-color 250ms;
}

.toggle-checkbox:checked~.toggle-slot {
    background-color: var(--dark-color);
}

.toggle-button {
    transform: translate(11.75em, 1.75em);
    position: absolute;
    height: 6.5em;
    width: 6.5em;
    border-radius: 50%;
    background-color: white;
    box-shadow: inset 0px 0px 0px 0.75em var(--dark-color);
    transition: background-color 250ms, border-color 250ms, transform 500ms cubic-bezier(.26, 2, .46, .71);
}

.toggle-checkbox:checked~.toggle-slot .toggle-button {
    background-color: var(--dark-color);
    box-shadow: inset 0px 0px 0px 0.75em white;
    transform: translate(1.75em, 1.75em);
}

.sun-icon {
    position: absolute;
    height: 6em;
    width: 6em;
    color: var(--dark-color);
}

.sun-icon-wrapper {
    position: absolute;
    height: 6em;
    width: 6em;
    opacity: 1;
    transform: translate(2em, 2em);
    transform-origin: 50% 50%;
    transition: opacity 150ms, transform 500ms cubic-bezier(.26, 2, .46, .71);
}

.toggle-checkbox:checked~.toggle-slot .sun-icon-wrapper {
    opacity: 0;
    transform: translate(3em, 2em);
}

.moon-icon {
    position: absolute;
    height: 6em;
    width: 6em;
    color: white;
}

.moon-icon-wrapper {
    position: absolute;
    height: 6em;
    width: 6em;
    opacity: 0;
    transform: translate(11em, 2em);
    transform-origin: 50% 50%;
    transition: opacity 150ms, transform 500ms cubic-bezier(.26, 2.5, .46, .71);
}

.toggle-checkbox:checked~.toggle-slot .moon-icon-wrapper {
    opacity: 1;
    transform: translate(12em, 2em);
}

.light-modes{
    font-size: 3px;
    float: right;
}

.light-modes-container{
    width: 100%;
    margin-top: 15px;
    display: block;
}

/* Media Queries */

@media only screen and (max-width: 1130px) {
    .container {
        width: 90%;
        gap: 0;
    }

    .field {
        grid-template-columns: auto;
        margin-bottom: 3em;
    }

    .content {
        text-align: left;
    }

    .button {
        width: 100%;
        display: block;
        font-size: 2.5em;
        text-align: center;
        margin-bottom: 20px;
        padding: 20px 0px;
    }

    .title {
        font-size: 2em;
        font-weight: 600;
        font-family: Archivo, system-ui;
        font-style: normal;
    }

    .light-modes {
        font-size: 8px;
    }
}